<template>
  <div>
    <div class="id">
      <div class="h">
        <p style="float:left;font-size: 23px;color: color: #333333;;">
          讲师介绍
        </p>
      </div>
      <div class="intro">
        <div class="avatar">
          <img src="@/assets/noodata.jpg" style="margin-top: 20px" alt="" />
        </div>
        <div class="mess">
          <div>
            <div>
              <p
                style="float:left;font-size: 23px;color: color: #333333;margin-top:0px;"
              >
                夏老师
              </p>
            </div>
            <div class="level">
              <p style="margin-top: 10px; color: #888888">高级总监</p>
            </div>
            <div class="content">
              <p
                style="
                  margin-top: 30px;
                  font-size: 16px;
                  font-family: SimSun;
                  overflow: hidden;
                  color: #777777;
                  text-align-last: left;
                "
              >
                &nbsp;&nbsp;资深项目经理、技术讲师、SUN
                SCJP、SCWCD、原工信部移动云计算教育培训中心教学总监。慧文信息门户系统、日本麦卡尔超市管理系统、崎玉市外来人口登记系统、深海视频会议管理系统、仙台市宫城县日常事务系统等项目的设计和开发。
                十年软件培训经验：曾在中国AOP全球外包排名第一的公司任Java、Oracle培训讲师、负责对公司员工新技术培训；曾任花旗银行特约JavaEE培训讲师；某部队研究所JavaEE培训；曾受聘为北航、厦门大学移动云计算专业教学主任，
                并主讲Java、Android、iOS课程
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="h">
        <p style="float:left;font-size: 23px;color: color: #333333;;">
          主讲课程
        </p>
      </div>
      <div class="course">
        <div class="courseintro" v-for="item in list" :key="item.id">
          <div class="test" style="overflow: hidden">
            <a href=""
              ><img
                style="height: 200px; width: 300px; transition: all 0.6s"
                src="@/assets/test.jpg"
                alt=""
              />
              <p
                class="p"
                style="
                  position: absolute;
                  margin-top: -110px;
                  margin-left: 80px;
                "
              >
                &nbsp;&nbsp;&nbsp;点击学习&nbsp;&nbsp;&nbsp;
              </p></a
            >
          </div>
          <p
            style="
              color: #333333;
              font-size: 18px;
              margin-right: 180px;
              margin-top: 1px;
              float: left;
            "
          >
            <a class="coursea" href="">{{ item.title }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CourseApi from "@/api/course";
export default {
  data() {
    return {
      id: "",
      list: {},
    };
  },
  created() {
    if (this.$route.name === "id") {
      this.id = this.$route.params.id;
    }
    this.getCourse();
  },
  methods: {
    getCourse() {
      CourseApi.getCourseInfoId(this.id).then((res) => {
        this.list = res.data.items;
      });
    },
  },
};
</script >
<style scoped>
a {  color : #666666 ; transition: 0.5 s; text-decoration: none;}
a:hover {  color : #68CB9B ; text-decoration:underline #68CB9B;}
.test:hover .p {
  opacity: 1;
}
.test:hover a img {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.p {
  opacity: 0;
  font-size: 25px;
  border-radius: 15px;
  border: 1px solid white;
  color: white;
}
img:hover {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.coursea:hover {
  color: black;
  text-decoration: underline black;
}
.courseintro {
  float: left;
  margin-right: 25px;
  margin-bottom: 50px;
}
.course {
  margin-left: 27px;
  width: 1300px;
}
.id {
  width: 1300px;
  margin-left: 100px;
}
.h {
  width: 1245px;
  height: 70px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: solid #dcdcdc 1px;
}
.intro {
  height: 340px;
  width: 1000px;

  margin-top: 20px;
}
.avatar {
  height: 288px;
  width: 288px;
  background-color: white;
  margin-left: 20px;
  box-shadow: 8px 8px 8px #ccc;
}
.mess {
  position: absolute;
  margin-top: -287px;
  margin-left: 330px;
  height: 288px;
  width: 800px;
}
.level {
  position: absolute;
  margin-top: 40px;
  height: 39.2px;
  width: 128px;
  background-color: #ededed;
}
.content {
  position: absolute;
  margin-top: 80px;
  height: 210px;
  width: 800px;
  overflow: hidden;
}
</style>